<template>
  <div>
    <div style="position: fixed;top: 50%;left: 20px;">
      <el-button type="text" href="#subPage" :underline="false" v-bind:disabled="first" @click="changePage(-1)">
        <div id="subPage">
          <i class="el-icon-arrow-left" style="font-size: 50px"/>
        </div>
      </el-button>
    </div>
    <div style="position: fixed;top: 50%;right: 20px;">
      <el-button type="text" href="#addPage" :underline="false" v-bind:disabled="last" @click="changePage(1)">
        <div id="addPage">
          <i class="el-icon-arrow-right" style="font-size: 50px"/>
        </div>
      </el-button>
    </div>
    <div class="shadow-needed"
         v-for="(product,i) in productList"
         v-bind:id="product.id"
         style="width: 1000px;height: 240px;border-radius: 10px;display: flex;margin-top: 20px;margin-left: auto;margin-right: auto;">
      <div style="padding-left: 30px;padding-top: 36px;">
        <div style="display: flex">
          <span style="width: 66px;text-align: right">ID</span>
          <span style="padding-left: 20px">{{product.id}}</span>
        </div>
        <div style="margin-top: 20px">
          <span>创建时间</span>
          <span style="padding-left: 20px">{{product.dateCreated}}</span>
        </div>
        <div style="margin-top: 20px">
          <span>修改时间</span>
          <span style="padding-left: 20px">{{product.dateModified}}</span>
        </div>
        <div style="display: flex;margin-top: 20px">
          <div style="line-height: 40px">预估价格</div>
          <div style="padding-left: 20px">
            <el-input-number :min="1" :max="9999" v-model="product.estimatePrice"></el-input-number>
          </div>
        </div>
      </div>
      <div style="padding-left: 30px;padding-top: 36px;">
        <div style="padding-left: 20px;display: flex;margin-top: 20px">
          <div style="margin-left: 20px;line-height: 40px">货物名称</div>
          <div style="padding-left: 20px">
            <el-input v-model="product.name"></el-input>
          </div>
        </div>
        <div style="padding-left: 20px;display: flex;margin-top: 20px">
          <div style="margin-left: 20px;line-height: 40px">货物单价</div>
          <div style="padding-left: 20px">
            <el-input-number :min="1" :max="9999" v-model="product.price"></el-input-number>
          </div>
        </div>
        <div style="padding-left: 20px;display: flex;margin-top: 20px">
          <div style="display: flex;">
            <div style="margin-left: 20px;line-height: 40px">最低单价</div>
            <div style="padding-left: 20px">
              <el-input-number :min="1" :max="9999" v-model="product.lowestPrice"></el-input-number>
            </div>
          </div>

        </div>
      </div>
      <div style="margin-left: 20px;margin-top: 10px">
        <div style="display: flex;">
          <div style="margin-left: 20px;margin-top:40px;line-height: 40px;">产品状态</div>
          <div style="padding-left: 20px;margin-top: 50px">
            <el-radio v-model="product.status" :label="true">已审核</el-radio>
            <el-radio v-model="product.status" :label="false">未审核</el-radio>
          </div>
        </div>
        <div style="margin-left: 100px;margin-top: 25px">
          <el-button @click="saveModify(product)" type="success">保存编辑</el-button>
        </div>
        <div style="margin-left: 100px;margin-top: 25px">
          <el-button @click="deleteProduct(product.id)" type="danger">删除产品</el-button>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
  export default {
    name: "StockManage",
    data() {
      return {
        productList: [],
        first: true,
        last: false,
        pageNumber: 1,
        limit: 15,
      }
    },
    methods: {
      getData() {
        this.$http({
          url: 'http://localhost:18080/product/?page=' + this.pageNumber + '&limit=' + this.limit,
          headers: {
            'Content-Type': 'application/json'
          },
          method: 'get'
        }).then(response => {
          this.productList = response.data['content'];
          this.first = response.data['first'];
          this.last = response.data['last']
        })
      },
      changePage(i) {
        this.$http({
          url: 'http://localhost:18080/product/?page=' + (this.pageNumber + parseInt(i)) + '&limit=' + this.limit,
          headers: {
            'Content-Type': 'application/json'
          },
          method: 'get'
        }).then(response => {
          this.productList = response.data['content'];
          this.pageNumber += parseInt(i);
          this.first = response.data['first'];
          this.last = response.data['last']
        })
      },
      deleteProduct(id){
        this.$http({
          url: 'http://localhost:18080/product/' + id,
          headers: {
            'Content-Type': 'application/json'
          },
          method: 'DELETE'
        }).then(() => {
          document.getElementById("" + id).style.display = "none";
          this.$message({
            type:'success',
            message:'删除成功'
          })
        })
      },
      saveModify(product){
        this.$http({
          url: 'http://localhost:18080/product/' + product.id,
          headers: {
            'Content-Type': 'application/json'
          },
          data:JSON.stringify(product),
          method: 'PUT'
        }).then(() => {
          this.$message({
            type:'success',
            message:'保存成功'
          })
        })
      }
    },
    mounted() {
      this.getData()
    }
  }
</script>

<style scoped>
  .shadow-needed {
    box-shadow: #666d70 0 0 5px;
  }

  .shadow-needed:hover {
    box-shadow: #253c45 0 0 10px;
  }

  /* 滚动槽 */
  ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  ::-webkit-scrollbar-track {
    border-radius: 3px;
    background: rgba(0, 0, 0, 0.06);
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.08);
  }

  /* 滚动条滑块 */
  ::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background: rgba(0, 0, 0, 0.12);
    -webkit-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2);
  }
</style>
